<template>
	<view v-if="userStore.userInfo.type == 1" class="page group-info">
		<nav-bar back>群管理</nav-bar>
		<view class="group-detail">
			<arrow-bar title="群主管理权转让" @click="onShowMoreMmeber()"></arrow-bar>
			<arrow-bar title="群管理员" @click="onAdministrators()"></arrow-bar>
			<arrow-bar title="群聊邀请列表" @click="onInviters()"></arrow-bar>
			<arrow-bar title="一键复制新群" @click="copyNewGroup()"></arrow-bar>
		</view>
		<bar-group>
			<switch-bar title="允许显示群成员" :checked="group.isLook==='1'" @change="(e)=>isShowMembern(e)">
			</switch-bar>
			<div style="height: 1rpx;"></div>
			<view class="detail-padding" @click="onEditGroup('notice')">
				<view class="notice">
					<view>
						群聊邀请确认
						<view class="content">
							启用后，群成员需群主或管理员确认才能邀请朋友进群。
						</view>
					</view>
					<switch class="switch" :checked="group.isInvite==='1'" @change="(e)=>invitationPermission(e)" color="#07c25f"
						style="transform:scale(0.9)"></switch>
				</view>
			</view>
			<switch-bar title="群主审批" :checked="group.isAudit==='1'" @change="(e)=>ownerApproval(e)">
			</switch-bar>
		</bar-group>
		<view class="group-detail">
			<arrow-bar title="禁言" @click="(e)=>noSpeaking(e)"></arrow-bar>
			<switch-bar title="全体禁言" :checked="group.isSilence==='1'" @change="(e)=>allNoSpeaking(e)">
			</switch-bar>
			<arrow-bar title="黑名单" @click="(e)=>onBlacklist(e)"></arrow-bar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupId: null,
				group: {},
				groupMembers: []
			}
		},
		methods: {
			onFocusSearch() {},
			onInviteMember() {
				uni.navigateTo({
					url: `/pages/group/group-invite?id=${this.groupId}`
				})
			},
			// 群主转让
			onShowMoreMmeber() {
				uni.navigateTo({
					url: `/pages/group/group-member?id=${this.groupId}&form=groupManagement`
				})
			},
			// 添加管理员
			onAdministrators() {
				uni.navigateTo({
					url: `/pages/group/edit-item?id=${this.groupId}&type=admin`
				})
			},
			// 邀请人列表
			onInviters() {
				uni.navigateTo({
					url: `/pages/group/group-member?id=${this.groupId}&form=inviters`
				})
			},
			// 群聊黑名单
			onBlacklist(e) {
				uni.navigateTo({
					url: `/pages/group/group-invite?id=${this.groupId}&type=黑名单`
				})
			},
			// 禁言
			noSpeaking(e) {
				uni.navigateTo({
					url: `/pages/group/group-member?id=${this.groupId}&form=noSpeaking`
				})
			},
			// 复制新群
			copyNewGroup() {
				this.$http({
					url: `/group/copy/${this.groupId}`,
					method: "GET"
				}).then((res) => {
					console.log(res)
					uni.showToast({
						title: '复制成功',
						icon: 'none',
						duration: 2000
					});
				})
			},
			// 展示群成员
			isShowMembern(e) {
				this.$http({
					url: `/group/updateIsLook`,
					method: "PUT",
					data: {
						"id": this.group.id,
						"name": this.group.name,
						"isLook": e.detail.value ? "1" : "0"
					}
				}).then((res) => {
					console.log(res)
				})
			},
			// 邀请权限
			invitationPermission(e) {
				this.$http({
					url: `/group/updateIsInvite`,
					method: "PUT",
					data: {
						"id": this.group.id,
						"name": this.group.name,
						"isInvite": e.detail.value ? "1" : "0"
					}
				}).then((res) => {
					console.log(res)
				})
			},
			// 群主审批
			ownerApproval(e) {
				this.$http({
					url: `/group/updateIsAudit`,
					method: "PUT",
					data: {
						"id": this.group.id,
						"name": this.group.name,
						"isAudit": e.detail.value ? "1" : "0"
					}
				}).then((res) => {
					console.log(res)
				})
			},
			allNoSpeaking(e) {
				this.$http({
					url: `/group/isSilence`,
					method: "PUT",
					data: {
						"id": this.group.id,
						"name": this.group.name,
						"isSilence": e.detail.value ? "1" : "0"
					}
				}).then((res) => {
					console.log(res)
				})
			},
			onEditGroup() {
				uni.navigateTo({
					url: `/pages/group/group-edit?id=${this.groupId}`
				})
			},
			onSendMessage() {
				let chat = {
					type: 'GROUP',
					targetId: this.group.id,
					showName: this.group.showGroupName,
					headImage: this.group.headImage,
				};
				this.chatStore.openChat(chat);
				let chatIdx = this.chatStore.findChatIdx(chat);
				uni.navigateTo({
					url: "/pages/chat/chat-box?chatIdx=" + chatIdx
				})
			},
			onQuitGroup() {
				uni.showModal({
					title: '确认退出?',
					content: `退出群聊后将不再接受群里的消息，确认退出吗?`,
					success: (res) => {
						if (res.cancel)
							return;
						this.$http({
							url: `/group/quit/${this.groupId}`,
							method: 'DELETE'
						}).then(() => {
							uni.showModal({
								title: `退出成功`,
								content: `您已退出群聊'${this.group.name}'`,
								showCancel: false,
								success: () => {
									setTimeout(() => {
										uni.switchTab({
											url: "/pages/group/group"
										});
										this.groupStore.removeGroup(this.groupId);
										this.chatStore.removeGroupChat(this
											.groupId);
									}, 100)
								}
							})
						});
					}
				});
			},
			onDissolveGroup() {
				uni.showModal({
					title: '确认解散?',
					content: `确认要解散群聊'${this.group.name}'吗?`,
					success: (res) => {
						if (res.cancel)
							return;
						this.$http({
							url: `/group/delete/${this.groupId}`,
							method: 'delete'
						}).then(() => {
							uni.showModal({
								title: `解散成功`,
								content: `群聊'${this.group.name}'已解散`,
								showCancel: false,
								success: () => {
									setTimeout(() => {
										uni.switchTab({
											url: "/pages/group/group"
										});
										this.groupStore.removeGroup(this.groupId);
										this.chatStore.removeGroupChat(this
											.groupId);
									}, 100)
								}
							})
						});
					}
				});

			},
			loadGroupInfo() {
				this.$http({
					url: `/group/find/${this.groupId}`,
					method: 'GET'
				}).then((group) => {
					this.group = group;
					// 更新聊天页面的群聊信息
					this.chatStore.updateChatFromGroup(group);
					// 更新聊天列表的群聊信息
					this.groupStore.updateGroup(group);

				});
			},
			loadGroupMembers() {
				console.log("loadGroupMembers")
				this.$http({
					url: `/group/members/${this.groupId}`,
					method: "GET"
				}).then((members) => {
					this.groupMembers = members.filter(m => !m.quit);
				})
			},
		},
		computed: {
			ownerName() {
				let member = this.groupMembers.find((m) => m.userId == this.group.ownerId);
				return member && member.showNickName;
			},
			isOwner() {
				return this.group.ownerId == this.userStore.userInfo.id;
			}
		},
		onLoad(options) {
			this.groupId = options.id;
			// 查询群聊信息
			this.loadGroupInfo(options.id);
			// 查询群聊成员
			this.loadGroupMembers(options.id)
		}

	}
</script>

<style lang="scss" scoped>
	.group-info {
		.group-detail {
			.detail-text {
				font-size: $im-font-size;
			}

			.detail-padding {
				padding: 0 20rpx;
				background-color: #fff;
			}
		}

		.detail-padding {
			padding: 0 20rpx;
			background-color: #fff;

			.notice {
				padding: 16rpx 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.content {
					color: #ccc;
					font-size: 24rpx
				}
			}
		}
	}
</style>